import Head from "next/head"; import Image from "next/image"; import { useRouter } from "next/router"; import { useEffect, useState } from "react"; import Layout from "../../../components/layout"; import Content from "../../../components/home/content"; import Modal from "../../../components/modal"; import { signIn, useSession } from "next-auth/react"; import AniList from "../../../components/media/aniList"; import ListEditor from "../../../components/listEditor"; import { GET_MEDIA_USER } from "../../../queries"; import { GET_MEDIA_INFO } from "../../../queries"; import { ToastContainer } from "react-toastify"; import DetailTop from "../../../components/anime/mobile/topSection"; import DesktopDetails from "../../../components/anime/infoDetails"; import AnimeEpisode from "../../../components/anime/episode"; export default function Info({ info, color }) { const { data: session } = useSession(); const [loading, setLoading] = useState(false); const [progress, setProgress] = useState(0); const [statuses, setStatuses] = useState(null); const [domainUrl, setDomainUrl] = useState(""); const [showAll, setShowAll] = useState(false); const [open, setOpen] = useState(false); const { id } = useRouter().query; const rec = info?.recommendations?.nodes?.map( (data) => data.mediaRecommendation ); useEffect(() => { handleClose(); async function fetchData() { setLoading(true); if (id) { try { setDomainUrl(window.location.origin); setProgress(0); setStatuses(null); if (session?.user?.name) { const response = await fetch("https://graphql.anilist.co/", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ query: GET_MEDIA_USER, variables: { username: session?.user?.name, }, }), }); const responseData = await response.json(); const prog = responseData?.data?.MediaListCollection; if (prog && prog.lists.length > 0) { const gut = prog.lists .flatMap((item) => item.entries) .find((item) => item.mediaId === parseInt(id[0])); if (gut) { setProgress(gut.progress); const statusMapping = { CURRENT: { name: "Watching", value: "CURRENT" }, PLANNING: { name: "Plan to watch", value: "PLANNING" }, COMPLETED: { name: "Completed", value: "COMPLETED" }, DROPPED: { name: "Dropped", value: "DROPPED" }, PAUSED: { name: "Paused", value: "PAUSED" }, REPEATING: { name: "Rewatching", value: "REPEATING" }, }; setStatuses(statusMapping[gut.status]); } } } } catch (error) { console.error(error); } finally { setLoading(false); } } } fetchData(); }, [id, info, session?.user?.name]); function handleOpen() { setOpen(true); document.body.style.overflow = "hidden"; } function handleClose() { setOpen(false); document.body.style.overflow = "auto"; } return ( <> {info ? info?.title?.romaji || info?.title?.english : "Retrieving Data..."} handleClose()}>

{!session && (

Edit your list

)} {session && info && ( )}

{info ? ( <> {info?.bannerImage && ( banner anime

)}

) : (

)}

{/* Mobile Anime Information */} {/* PC Anime Information*/} {/* Episodes */}

{info && rec?.length !== 0 && (

)}

); } export async function getServerSideProps(context) { const { id } = context.query; const API_URI = process.env.API_URI; const res = await fetch("https://graphql.anilist.co/", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ query: GET_MEDIA_INFO, variables: { id: id?.[0], }, }), }); const json = await res.json(); const data = json?.data?.Media; if (!data) { return { notFound: true, }; } const textColor = setTxtColor(data?.coverImage?.color); const color = { backgroundColor: `${data?.coverImage?.color || "#ffff"}`, color: textColor, }; return { props: { info: data, color: color, api: API_URI, }, }; } function getBrightness(hexColor) { if (!hexColor) { return 200; } const rgb = hexColor .match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i) .slice(1) .map((x) => parseInt(x, 16)); return (299 * rgb[0] + 587 * rgb[1] + 114 * rgb[2]) / 1000; } function setTxtColor(hexColor) { const brightness = getBrightness(hexColor); return brightness < 150 ? "#fff" : "#000"; }